<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电影数据图表</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="weeklyViewsChart" style="width: 600px; height: 400px;"></div>
<div id="monthlyViewsChart" style="width: 600px; height: 400px;"></div>

<script>
    // 初始化图表
    var weeklyViewsChart = echarts.init(document.getElementById('weeklyViewsChart'));
    var monthlyViewsChart = echarts.init(document.getElementById('monthlyViewsChart'));

    // 异步加载数据并设置图表配置
    fetch('/chart-data/weekly-views')
        .then(response => response.json())
        .then(data => {
            var option = {
                title: { text: '当周播放量' },
                tooltip: {},
                xAxis: { data: data.map(item => item.movieId) },
                yAxis: {},
                series: [{
                    name: '播放量',
                    type: 'bar',
                    data: data.map(item => item.weeklyViews)
                }]
            };
            weeklyViewsChart.setOption(option);
        });

    fetch('/chart-data/monthly-views')
        .then(response => response.json())
        .then(data => {
            var option = {
                title: { text: '月播放量' },
                tooltip: {},
                xAxis: { data: data.map(item => item.movieId) },
                yAxis: {},
                series: [{
                    name: '播放量',
                    type: 'bar',
                    data: data.map(item => item.monthlyViews)
                }]
            };
            monthlyViewsChart.setOption(option);
        });
    // 折线图
    fetch('/chart-data/weekly-views')
        .then(response => response.json())
        .then(data => {
            var option = {
                title: { text: '当周播放' },
                tooltip: {},
                xAxis: { data: data.map(item => item.movieId) },
                yAxis: {},
                series: [{
                    name: '播放量',
                    type: 'line',
                    data: data.map(item => item.weeklyViews)
                }]
            };
            weeklyViewsChart.setOption(option);
        });
</script>
</body>
</html>